<template>
  <view class="pages" :style="`height:${safeAreaHeight - 44}px`">
    <view
      :style="`height:${safeAreaHeight - 44}px`"
      style="display: flex; flex-direction: column; justify-content: space-between"
    >
      <view class="concent" :style="{ height: cenHeight + 'px' }">
        <view class="card" :style="{ height: cenHeight  + 'px'}">
          <view class="u-flex" style="margin-bottom: 50rpx">
            <view class="u-flex-1">
              <textarea
                v-model="content"
                placeholder="请写点什么描述一下你的作品吧"
                class="textarea"
                :maxlength="-1"
              />
            </view>
            <view class="thumb" @click="toPlay()">
              <image
                :src="videoPath + '?x-oss-process=video/snapshot,t_480,f_jpg'"
                mode="aspectFill"
              ></image>
              <view class="mask">
                <view class="playIcon">
                  <image src="../../static/img/index/play.png" mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <view class="u-flex u-p-t-30 u-p-b-30 u-border-bottom items" @click="selfLocation()">
            <image src="../../static/img/index/address.png" class="icons"></image>
            <view class="u-flex-1">所在位置</view>
            <view style="width: 420rpx" class="u-line-1 u-text-right">{{ addressName }}</view>
            <u-icon name="arrow-right" size="16"></u-icon>
          </view>
          <view class="u-flex u-p-t-30 u-p-b-30 u-border-bottom items" @click="openSheet()">
            <image src="../../static/img/index/fw.png" class="icons"></image>
            <view class="u-flex-1">所有人可见</view>
            <view>{{ permission == 1 ? '公开' : '仅自己可见' }}</view>
            <u-icon name="arrow-right" size="16"></u-icon>
          </view>
        </view>
      </view>
      <view style="background-color: #fff" class="fixBottom">
        <view class="btns" @click="submit()"> 发布</view>
      </view>
    </view>
    <u-popup :show="showSheet" mode="bottom" @close="closeSheet" :round="20" v-if="showSheet">
      <view>
        <view class="sheetlistItem" @click="selectClick(1)">公开</view>
        <view class="sheetlistItem" @click="selectClick(2)">仅自己可见</view>
      </view>
      <u-gap bgColor="#F5F6F8" height="10"></u-gap>
      <view class="u-action-cencel">
        <text
          @touchmove.stop.prevent
          :hover-stay-time="150"
          class="u-action-sheet__cancel-text"
          @click="closeSheet"
          >取消</text
        >
      </view>
      <h-line :height="bottoms" bgColor="#fff"></h-line>
    </u-popup>
    <view v-if="display" class="mask" catchtouchmove="true" @click="close"></view>
    <areaWindow
      :display="display"
      :address="addressInfoList"
      @submit="OnChangeAddress"
      @changeClose="changeClose"
    ></areaWindow>
    <h-authpup
      ref="authpup"
      type="top"
      @changeAuth="changeAuth"
      permissionID="ACCESS_FINE_LOCATION"
    ></h-authpup>
  </view>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import {
  onLoad,
  onShow,
  onPullDownRefresh,
  onReachBottom,
  onUnload,
  onBackPress,
  onReady,
} from '@dcloudio/uni-app'
import { ssvApi, createVieoThumbApi } from '@/api/social'
import { uploadApi } from '@/utils/upLoad'
import { getGeocoder } from '@/api/shop/store.js'
import areaWindow from '@/components/areaWindow'
import { getCityV2, getCityList } from '@/api/shop/api.js'
import { useMemberStore, useSystemStore } from '@/stores'
const userStore = useMemberStore()
const userInfo = ref(userStore.userInfo)
const doctorUserId=ref(userStore.userInfo.uid)
const authpup = ref(null)
const imagePath = ref('')
const videoPath = ref('')
// https://mp-bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.cdn.bspapp.com/dzq100.mp4
const content = ref('')
const showSheet = ref(false)
const permission = ref(1)
const bottoms = ref(0)
const openSheet = () => {
  showSheet.value = true
}
const closeSheet = () => {
  showSheet.value = false
}
const selectClick = (num) => {
  permission.value = num
  showSheet.value = false
}
const safeAreaHeight = ref(0)
const safeAreaInBottom = ref(0)
const addressInfoList = ref([])
const cenHeight = ref(680)
const video_url = ref('')
onLoad(async (options) => {
  if (options.path) {
    // let ret = JSON.parse(options.res)
    // videoPath.value = options.path
    console.log('视频地址', options.path)
    video_url.value = options.path
    let path = await uploadApi(options.path)
    console.log('视频地址1', path)
    videoPath.value = path
    // let thumbnail= await createVieoThumbApi({video_url:options.path})
    // console.log(thumbnail, 12)
  }
  uni.getSystemInfo({
    success: (e) => {
      console.log(e)
      safeAreaHeight.value = e.windowHeight
      // #ifdef H5
       safeAreaHeight.value = e.windowHeight-20
      // #endif
      bottoms.value = e.safeAreaInsets.bottom * 2
      // safeAreaInBottom.value = e.safeAreaInsets.bottom
      nextTick(() =>{
        getHeight()
      })
    },
  })
})
const toPlay = () => {
  let path=videoPath.value?videoPath.value: video_url.value
  uni.navigateTo({
    url: '/social/video/prevideoDetail?videoPath=' + path,
    animationType: 'zoom-out',
  })

}
const latitude = ref()
const longitude = ref()
const display = ref(false)
function OnChangeAddress(address) {
  console.log(address, '==============address===================')
  addressInfoList.value = address
  addressName.value = address[0].name + '-' + address[1].name + '-' + address[1].name
}
function changeClose() {
  display.value = false
}

function close() {
  display.value = false
}
function selfLocation() {
  //  if (authpup.value) {
  //    authpup.value.open()
  //  }
  display.value = true
}
const addressInfo = ref({})
const addressName = ref('')

function chooseLocation() {
  uni.chooseLocation({
    success: (res1) => {
      addressName.value = res1.name
      latitude.value = res1.latitude //纬度
      longitude.value = res1.longitude //经度
      getGeocoder({
        lat: latitude.value,
        long: longitude.value,
      }).then((res1) => {
        const data = res1.data
        addressInfo.value.provice = data.address_component.province
        addressInfo.value.city = data.address_component.city
        addressInfo.value.counry = data.address_component.district
        addressInfo.value.street = data.address_component.street
        addressInfo.value.address = data.address
        addressInfo.value.lng = data.location.lng
        addressInfo.value.lat = data.location.lat
      })
    },
  })
}

function changeAuth() {
  chooseLocation()
}


function getHeight() {
  uni
    .createSelectorQuery()
    .select('.fixBottom')
    .boundingClientRect((rect) => {
      console.log('================', rect)
      cenHeight.value = safeAreaHeight.value - rect.height - safeAreaInBottom.value-20
      console.log('++++++++', cenHeight.value, safeAreaHeight.value)
    })
    .exec()
}
onReady(() => {
  // getHeight()
})
const flag = ref(true)
const submit = async () => {
  if (!flag) return
  flag.value = false
  if (content.value.length == 0) {
    console.log(content.value)
    console.log(content.value.length)
    uni.showToast({
      title: '请填写作品描述！',
      icon: 'none',
    })
    return false
  }
  if (!addressName.value) {
    uni.showToast({
      title: '请选择地址！',
      icon: 'none',
    })
    return false
  }

  // let path = await uploadApi(videoPath.value)
  ssvApi({
    video_link: videoPath.value,
    content: content.value,
    permission: permission.value,
    area: addressInfoList.value,
    doctor_user_id:doctorUserId.value,
    thumbnail: videoPath.value + '?x-oss-process=video/snapshot,t_480,f_jpg',
  }).then((res) => {
    console.log(res)
    flag.value = true
    uni.showToast({
      title: permission.value == 2 ? '已保存至个人主页' : res.message,
      icon: 'none',
      success: (result) => {
        uni.redirectTo({
          url: `/socials/video/videoDetail?id=${res.data}`,
        })
      },
    })
  })
}
</script>

<style>
page {
  background: #f6f6f6;
}
</style>
<style scoped lang="scss">
.pages {
  // padding: 20rpx 24rpx;
  // height: calc(100vh - 44px);
  // margin: auto;
  padding-top: 20rpx;
  box-sizing:border-box;
}
.concent {
  padding: 0 24rpx;
}

.card {
  background: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  width: 702rpx;
  margin: auto;
}

.thumb {
  width: 160rpx;
  height: 220rpx;
  border-radius: 16rpx;
  position: relative;

  image {
    display: block;
    width: 160rpx;
    height: 220rpx;
    border-radius: 16rpx;
  }

  .mask {
    position: absolute;
    width: 160rpx;
    height: 220rpx;
    background: rgba(0, 0, 0, 0);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .playIcon {
      width: 66rpx;
      height: 66rpx;
      background: rgba(51, 51, 51, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
        display: block;
      }
    }
  }
}

.textarea {
  width: 452rpx;
  height: 220rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
}

.u-border-bottom {
  border-bottom: 1rpx solid #f4f4f4;
}

.btns {
  width: 702rpx;
  height: 88rpx;
  background: #00C1B9;
  border-radius: 44rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
}

.items {
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;

  .icons {
    width: 36rpx;
    height: 36rpx;
    display: block;
    margin-right: 17rpx;
  }
}

.sheetlistItem {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #202020;
  line-height: 102rpx;
  text-align: center;
  border-bottom: 1rpx solid #f1f1f1;
}

.u-action-cencel {
  font-weight: 400;
  font-size: 30rpx;
  color: #aaaaaa;
  text-align: center;
  line-height: 102rpx;
}

.fixBottom {
  width: 750rpx;
  // height: 96rpx;
  background: #ffffff;
  padding: 8rpx 24rpx 0 24rpx;
  padding-bottom: calc(15rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  padding-bottom: calc(15rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>
